<template>
  <div class="films">

    <div>
      <nav>
        <a v-for="item in typeList" :key="item" :class="{ active: selectType === item }"
           @click.prevent="handleTypeSelect(item)">
          <router-link :to=" '/films?region=' + selectRegion + '&type=' + item ">
            {{ item }}
          </router-link>
        </a>
        <div class="animation"></div>
      </nav>
      <nav class="region-nav">
        <a v-for="item in regionList" :key="item" :class="{ active: selectRegion === item }"
           @click.prevent="handleRegionSelect(item)">
          <router-link :to=" '/films?region=' + item + '&type=' + selectType ">{{ item }}</router-link>
        </a>
        <div class="animation start-home"></div>
      </nav>
    </div>

    <!--电影展示-->
    <div class="panel-content">
      <dl class="movie-list" v-if="filmList.length > 0">
        <dd v-for="item in filmList">
          <router-link :to="'/film/info?fid=' + item.id">
            <div class="movie-item">
              <div class="movie-poster">
                <el-tag
                    class="poster-tag"
                    :type="item.vip ? 'warning' : 'success'"
                    size="small">
                  {{ item.vip ? 'VIP' : '免费' }}
                </el-tag>
                <img class="movie-poster-img" alt=""
                     :src="item.cover">
                <div class="movie-overlay movie-overlay-bg">
                  <div class="movie-info">
                    <span class="movie-title">{{ item.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </dd>
      </dl>
      <div v-else class="no-movies">
        暂无影片
      </div>
    </div>

  </div>
</template>

<script>

import {FindFilmByRegionAndType, ListAllFilm} from "@/api/film";

export default {

  name: "Films",

  data() {
    return {
      selectType: '全部',
      selectRegion: '全部',
      typeList: ["全部", "家庭", "惊悚", "科幻", "爱情", "动作", "喜剧", "恐怖", "悬疑", "犯罪", "冒险", "战争", "历史", "武侠", "传记", "古装", "其他"],
      regionList: ["全部", "内地", "香港", "台湾", "美国", "韩国", "日本", "泰国", "印度", "法国", "英国", "德国", "其他"],
      timeList: ["全部", "本周", "本月"],
      filmList: [],
    }
  },

  mounted() {
    ListAllFilm().then(res => {
      this.filmList = res.data
    })
  },


  methods: {

    handleTypeSelect(item) {
      this.selectType = item;
      this.reloadFilmList()
    },

    handleRegionSelect(item) {
      this.selectRegion = item;
      this.reloadFilmList()
    },

    reloadFilmList() {
      FindFilmByRegionAndType(this.selectRegion, this.selectType).then(res => {
        this.filmList = res.data
      })
    },

  },

}
</script>

<style scoped>

.films {
  padding: 20px 220px;
}

::v-deep nav {
  position: relative;
  width: 1020px;
  height: 40px;
  padding: 0 0;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  background-color: #28243c;
  z-index: 2;
}

::v-deep .region-nav {
  width: 780px;
}

nav a {
  position: relative;
  display: block;
  float: left;
  font-size: 15px;
  line-height: 40px;

  height: 50px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  /* background-color: #00b894; */
  z-index: 10;

  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
}

nav a {
  width: 60px;
  transition: all 0.3s;
}

nav a:hover {
  color: #f0f0f0;
}

::v-deep .router-link-exact-active {
  font-weight: bolder;
  color: #7b8cf6;
}

nav .animation {
  position: absolute;
  height: 100%;
  background-color: #7b8cf6;
  z-index: 9;
  border-radius: 8px;
  transition: all 0.3s;
}

nav a:hover ~ .animation {
  width: 60px;
}

nav a:nth-child(1):hover ~ .animation {
  left: calc(0 * 60px);
}

nav a:nth-child(2):hover ~ .animation {
  left: calc(1 * 60px);
}

nav a:nth-child(3):hover ~ .animation {
  left: calc(2 * 60px);
}

nav a:nth-child(4):hover ~ .animation {
  left: calc(3 * 60px);
}

nav a:nth-child(5):hover ~ .animation {
  left: calc(4 * 60px);
}

nav a:nth-child(6):hover ~ .animation {
  left: calc(5 * 60px);
}

nav a:nth-child(7):hover ~ .animation {
  left: calc(6 * 60px);
}

nav a:nth-child(8):hover ~ .animation {
  left: calc(7 * 60px);
}

nav a:nth-child(9):hover ~ .animation {
  left: calc(8 * 60px);
}

nav a:nth-child(10):hover ~ .animation {
  left: calc(9 * 60px);
}

nav a:nth-child(11):hover ~ .animation {
  left: calc(10 * 60px);
}

nav a:nth-child(12):hover ~ .animation {
  left: calc(11 * 60px);
}

nav a:nth-child(13):hover ~ .animation {
  left: calc(12 * 60px);
}

nav a:nth-child(14):hover ~ .animation {
  left: calc(13 * 60px);
}

nav a:nth-child(15):hover ~ .animation {
  left: calc(14 * 60px);
}

nav a:nth-child(16):hover ~ .animation {
  left: calc(15 * 60px);
}

nav a:nth-child(17):hover ~ .animation {
  left: calc(16 * 60px);
}


.panel-content {
  overflow: hidden;
  width: 100%;
  margin-top: 23px
}

.movie-list {
  margin: -25px 0 20px -25px
}

.movie-list dd {
  margin: 30px 0 0 30px;
  display: inline-block;
  vertical-align: top;
  position: relative
}

.movie-item {
  position: relative;
  margin: -1px;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  transition: all 0.4s ease-in-out;
}

.movie-item:hover .movie-title {
  transition: all 0.4s ease-in-out;
  font-size: 20px;
}

.movies-panel .film-channel:hover .movie-item-hover {
  display: block
}

.movie-poster {
  background-color: #1f1c30;
  width: 160px;
  height: 220px;
  overflow: hidden;
  position: relative;
  border-radius: 7px;
}

.movie-poster a {
  display: block
}

.poster-tag {
  position: relative;
  left: -2px;
  top: -2px;
  z-index: 5;
}

.poster-movie-tag {
  z-index: 5;
}

.movie-poster img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.movie-poster .movie-poster-img[src] {
  visibility: visible;
}

.movie-poster .movie-poster-img[data-src] {
  visibility: hidden;
}

.movie-poster .movie-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0
}

.movie-overlay-bg {
  background: linear-gradient(180deg, rgba(31, 28, 48, 0) 0%, rgba(31, 28, 48, 0.3) 70%, #1F1C30 100%);
  //background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1f1c30);
}

.movie-overlay .movie-info {
  color: #fff;
  position: absolute;
  margin: auto;
  bottom: 7px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";

}

.movie-overlay .movie-title {
  margin-left: 7px;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.no-movies {
  text-align: center;
  color: rgba(255, 255, 255, 0.18);
  font-size: 60px;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
  font-weight: bolder;

  height: 200px;
  line-height: 200px;
}
</style>
